<template>
    <div>
        <el-card style="width:70%;margin:0 auto;margin-top: 50px">

            <div style="display: flex">

                <el-button type="primary" style="margin-left: 15px" @click="etc">充值</el-button>
                <div>
                    <el-input v-model="name" style="width: 200px;margin-left: 390px" placeholder="请输入文档名称"
                              suffix-icon="el-icon-search"></el-input>
                </div>
                <div style="margin-left: 15px">
                    <el-select v-model="type" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                </div>
                <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
            </div>


            <el-row style="width:1000px;margin:0 auto;">
                <el-col>
                    <el-card style="margin-top: 30px;background:skyblue">
                        <div style="display: flex;flex-direction: row;justify-content:space-evenly">
                            <div style="margin-left: -150px;width:20%">标题</div>
                            <div>类型</div>
                            <div style="margin-left: 10px">大小</div>
                            <div>所需积分</div>
                            <div style="position:absolute;right:20px">下载</div>

                        </div>
                    </el-card>

                </el-col>
                <el-col v-for="(item ,index) in file" :key="index" style="margin-top:10px;">
                    <el-card :body-style="{ padding: '0px',margin: '10px',}" style="background:#dcdfe6">


                        <div style="display: flex;justify-content:space-evenly;">
                            <div style="position:absolute;left: 20px">{{item.name}}</div>
                            <div style="margin-left: 230px">{{item.type}}</div>
                            <div style="position: relative;left: 30px">{{item.size}}KB</div>
                            <div style="position: absolute;left: 780px">{{item.points}}</div>
                            <div>
                                <el-button type="primary" @click="download(item.id)"
                                           style="position: absolute;right:10px;margin-top:-5px">下载
                                </el-button>
                            </div>

                            <div></div>

                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div style="padding: 10px 0;float:right">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[2, 5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>
        <br/>
        <br/>
        <br/>
        <br/>


        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>尊敬的用户，您的积分不足，请充值！</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="etc">前往充值</el-button>
  </span>
        </el-dialog>


        <!--充值页面-->
        <el-dialog
                title="充值"
                :visible.sync="Visible"
                width="30%">

            <el-row :gutter="4">
                <el-col :span="8" v-for="(o, index) in point" :key="index">
                    <a @click="add(o.id)">
                        <el-card
                                :class="{box11:currentName===o.id}"

                                style="width:135px;height:80px;margin-top: 10px;margin-left: 5px">

                            <div :class="{box11:currentName===o.id}">
                                <span style="width:50%;padding-left: 10px;font-weight: bold">{{o.point}}积分</span>
                                <p style="font-size: 5px;padding-top: 10px">售价：{{o.money}}元</p>
                                <div class="bottom clearfix">

                                </div>
                            </div>
                        </el-card>
                    </a>
                </el-col>
            </el-row>


            <span slot="footer" class="dialog-footer">
    <el-button @click="Visible= false">取 消</el-button>
    <el-button type="primary" @click="buy">充值</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from '../../utils/request'

    let str
    export default {

        name: "Download",
        created() {
            str = sessionStorage.getItem("user")
            this.load()
        },
        mounted() {

            let JsonUser = sessionStorage.getItem("user")
            this.form = JSON.parse(JsonUser)

        },

        data() {
            return {
                currentName: 0,
                point: [],
                Visible: false,
                dialogVisible: false,
                options: [{
                    value: 'zip',
                    label: 'zip'
                }, {
                    value: 'md',
                    label: 'md'
                }, {
                    value: 'png',
                    label: 'png'
                }, {
                    value: 'jpg',
                    label: 'jpg'
                }, {
                    value: 'mp4',
                    label: 'mp4'
                },
                    {
                        value: 'pdf',
                        label: 'pdf'
                    },
                    {
                        value: 'exe',
                        label: 'exe'
                    },
                    {
                        value: 'txt',
                        label: 'txt'
                    }],
                type: '',
                name: '',
                form: {},
                pageNum: 1,
                pageSize: 10,
                file: [],
                total: 0,
                //    用户对象
                forms: {}

            }
        }, methods: {

            buy() {
                console.log(this.currentName)
                request.get('/order/buy/' + this.currentName).then(res => {
                    // 请求成功跳转沙箱支付的页面
                    window.open(res.data)
                    console.log(res.data)
                    this.Visible = false


                })
            },
            add(id) {

                this.currentName = id

            },
            //充值
            etc() {
                if (str === null) {
                    return
                }
                this.dialogVisible = false
                this.Visible = true

                request.get("/point/findAll").then(res => {
                    this.point = res.data
                })
            },
            cancel() {
                this.$toast({
                    type: "warnning",
                    message: '积分不足，请继续学习！'
                })
                this.dialogVisible = false

            },


            reset() {
                this.name = ''
                this.type = ''
                this.load()
            },
            load() {
                if (str == null) {
                    return
                }
                request.get("/download/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        name: this.name,
                        type: this.type,

                    }
                }).then(res => {
                    this.file = res.data.records
                    this.total = res.data.total

                })

            },

            download(id) {

                request.get("/download/findPoints/" + id).then(res => {
                    if (this.form.points < res.data.points) {
                        /* this.$toast({
                             type: "warnning",
                             message: '积分不足，请继续学习！'
                         })*/

                        this.dialogVisible = true;

                        return

                    } else {


                        this.$confirm('您是否要消耗 ' + res.data.points + '积分，下载该文件', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {


                            this.form.points -= res.data.points

                            request.put('/person/updateUser', this.form).then(result => {


                                if (result.code == 20000) {
                                    this.$toast({
                                        type: "success",
                                        message: '下载成功'
                                    })
                                    sessionStorage.setItem("user", JSON.stringify(this.form))
                                    window.open(res.data.url)
                                }

                            })
                        }).catch(() => {
                            this.$toast({
                                type: 'success',
                                message: '已取消操作'
                            });
                        });


                    }
                })


            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },

        }


    }
</script>

<style scope>
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box11 {
        color: green;

    }
</style>
